<template>
  <div class="day-wrap">
    <div v-if="showPage == 1">
      <div class="day-box">
        <div class="title">企业选择</div>
        <div class="company-box">
          <span class="company" v-text="company" @click="openCompanyList">请选择企业</span>
          <img src="./pull.png" class="pull" onclick="return false"/>
        </div>
      </div>
      <!--<div class="day-con" @click="staff">-->
      <!--<div class="title">在职员工管理</div>-->
      <!--<div class="icon"><img src="./back.png" class="back"/></div>-->
      <!--</div>-->
      <div class="day-con" @click="check">
        <div class="title">资格审核</div>
        <div class="icon"><img src="./back.png" class="back" onclick="return false"/></div>
      </div>
      <div class="day-con" @click="attendance">
        <div class="title">员工考勤</div>
        <div class="icon"><img src="./back.png" class="back" onclick="return false"/></div>
      </div>

      <!--驻厂所在企业-->
      <div class="company-box" v-show="showCompany" @click="closeCompanyList">
        <div class="company-list">
          <div class="name" v-for="(item,index) in companyList" :key="index"
               @click="selectCompany(item.id,item.mechanismName)">{{item.mechanismName}}
          </div>
        </div>
      </div>
    </div>

    <empty v-if="showPage == 2"></empty>

  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import empty from "../../components/errorpage"

  export default {
    data() {
      return {
        showPage: 0,
        company: "",
        showCompany: false,
        companyList: [],
        userSign: "",
        mechanismId: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryResidentAuth();
    },
    methods: {
      queryResidentAuth() {//是否驻厂权限
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_resident_role?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_resident_role?sgin=" + this.userSign + "&type=2" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.showPage = 1;
            this.queryMechanism();
          } else {
            this.showPage = 2;
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeCompanyList() {
        this.showCompany = false;
      },
      openCompanyList() {
        this.showCompany = true;
      },
      selectCompany(id, name) {//选择所在企业
        this.showCompany = false;
        this.company = name;
        this.mechanismId = id;
      },
      staff() {
        this.$router.push({path: "/staffmanage", query: {mechanismId: this.mechanismId}});
      },
      check() {
        this.$router.push({path: "/residentcheck", query: {mechanismId: this.mechanismId}});
      },
      attendance() {
        this.$router.push({path: "/attendance", query: {mechanismId: this.mechanismId}});
      },
      queryMechanism() {//查询驻厂所在企业
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/get_mechanism_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/get_mechanism_list?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = resultObj.data;
              this.company = this.companyList[0].mechanismName;
              this.mechanismId = this.companyList[0].id;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      }
    },
    components: {
      empty
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .day-wrap
    width: 100%
    height: 100%
    overflow: hidden
    .day-box
      display: flex
      align-items: center
      width: 100%
      height: 1.84rem
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .title
        margin-left: 0.373333rem
        margin-right: 0.266666rem
        font-size: 0.44rem
        color: rgba(52, 52, 52, 1)
      .company-box
        position: relative
        width: 70%
        padding-left: 0.266666rem
        height: 1.066666rem
        line-height: 1.066666rem
        border: 0.027rem solid rgba(242, 242, 242, 1)
        background: #FFF
        .company
          display: inline-block
          width: 100%
          height: 1.066666rem
          line-height: 1.066666rem
          font-size: 0.44rem
          color: rgba(52, 52, 52, 1)
        .pull
          position: absolute
          top: 0
          bottom: 0
          margin: auto
          right: 0.373333rem
          width: 0.373rem
          height: 0.373rem
    .day-con
      display: flex
      align-items: center
      width: 100%
      height: 1.28rem
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .title
        margin-left: 0.373333rem
        margin-right: 0.266666rem
        font-size: 0.44rem
        color: rgba(52, 52, 52, 1)
      .icon
        width :0.373rem
        height :0.373rem
        margin-left: auto
        margin-right: 0.373333rem
        .back
          width: 100%
          height: 100%
    .company-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .company-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto;
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
</style>
